<template>
	<div class="address">
		<div class="addAddressButton" @click="addAddressdialogFormVisible = true">新增收货地址</div>
		<div class="info" v-for="(item,index) in AllAddressList" :key="index">
			<div class="clearfix">
				<span class="title fl">{{ item.recipient_name }}</span>
				<div class="default fl" v-if="item.default">默认地址</div>
				<span class="iconfont icon-cuowu fr cs" @click="del(item.id)"></span>
			</div>
			<table>
				<tr>
					<td class="table-key">收货人：</td>
					<td class="table-value">{{ item.recipient_name }}</td>
				</tr>
				<tr>
					<td class="table-key">所在地区：</td>
					<td class="table-value">{{ item.district }}</td>
				</tr>
				<tr>
					<td class="table-key">收货地址：</td>
					<td class="table-value">{{ item.recipient_address }}</td>
				</tr>
				<tr>
					<td class="table-key">手机：</td>
					<td class="table-value">{{ item.recipient_mobile }}</td>
				</tr>
				<tr class="edit">
					<td class="table-key"></td>
					<td class="table-value" @click="editAddress(item.user_address_id)">编辑</td>
				</tr>
			</table>
		</div>

		<el-dialog v-model="addAddressdialogFormVisible" title="新增收货地址" width="500">
			<el-form :model="form">
				<el-form-item label="收件人" :label-width="formLabelWidth">
					<el-input v-model="form.recipient_name" autocomplete="off" placeholder="请输入收件人姓名" />
				</el-form-item>
				<el-form-item label="所在地区" :label-width="formLabelWidth">
					<el-input v-model="form.district" autocomplete="off" placeholder="请输入收货地区" />
				</el-form-item>
				<el-form-item label="收货地址" :label-width="formLabelWidth">
					<el-input v-model="form.recipient_address" autocomplete="off" placeholder="请输入收件地址" />
				</el-form-item>
				<el-form-item label="联系电话" :label-width="formLabelWidth">
					<el-input v-model="form.recipient_mobile" autocomplete="off" placeholder="请输入收件人联系电话" />
				</el-form-item>
				<el-form-item label="是否默认地址" :label-width="formLabelWidth">
					<el-switch v-model="form.default" />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="addAddressdialogFormVisible = false">取消</el-button>
					<el-button type="primary" @click="saveNewAddress">
						保存
					</el-button>
				</div>
			</template>
		</el-dialog>

		<el-dialog v-model="editAddressdialogFormVisible" title="编辑收货地址" width="500">
			<el-form :model="editAddressInfo">
				<el-form-item label="收件人" :label-width="formLabelWidth">
					<el-input v-model="editAddressInfo.recipient_name" autocomplete="off" placeholder="请输入收件人姓名" />
				</el-form-item>
				<el-form-item label="所在地区" :label-width="formLabelWidth">
					<el-input v-model="editAddressInfo.district" autocomplete="off" placeholder="请输入收货地区" />
				</el-form-item>
				<el-form-item label="收货地址" :label-width="formLabelWidth">
					<el-input v-model="editAddressInfo.recipient_address" autocomplete="off" placeholder="请输入收件地址" />
				</el-form-item>
				<el-form-item label="联系电话" :label-width="formLabelWidth">
					<el-input v-model="editAddressInfo.recipient_mobile" autocomplete="off" placeholder="请输入收件人联系电话" />
				</el-form-item>
				<el-form-item label="是否默认地址" :label-width="formLabelWidth">
					<el-switch v-model="editAddressInfo.default" />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="editAddressdialogFormVisible = false">取消</el-button>
					<el-button type="primary" @click="updateAddress">
						更新
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue'
	import {
		addAddressData,
		getAllAddressData
	} from '@/network/address.js'
	const addAddressdialogFormVisible = ref(false)
	const formLabelWidth = '140px'

	const form = reactive({
		recipient_name: '',
		district: '',
		recipient_address: '',
		recipient_mobile: '',
		default: false
	})

	const saveNewAddress = () => {
		addAddressData(form).then(res => {
			if (res.status == 7000) {
				console.log(res.data)
				alert('保存成功')
			} else {

			}
			addAddressdialogFormVisible.value = false
		})
	}

	let AllAddressList = ref([{
		id: '',
		recipient_name: '',
		district: '',
		recipient_address: '',
		recipient_mobile: '',
		default: false
	}])

	const getAllAddress = () => {
		getAllAddressData().then((res) => {
			AllAddressList.value = res.data;
			console.log(AllAddressList.value)
		})
	}

	onMounted(() => {
		getAllAddress();
	})

	let editAddressdialogFormVisible = ref(false);
	let editAddressInfo = reactive({
		id:'',
		recipient_name: '',
		district: '',
		recipient_address: '',
		recipient_mobile: '',
		default: false
	})
	const editAddress = (id) =>{
		// console.log(id);
		AllAddressList.value.forEach( (element) => {
			if(element.user_address_id == id){
				console.log(element);
				editAddressInfo = element;
			}
		} )
		editAddressdialogFormVisible.value = true;
	}
	
	const updateAddress = () => {
		editAddressdialogFormVisible = false
		alert('更改成功')
	}
	
	const del = (id) => {
		alert("暂不可删除")
	}
</script>

<style lang="less" scoped>
	.address {
		padding: 20px;
		width: 630px;
		background-color: white;

		.addAddressButton {
			width: 115px;
			height: 30px;
			background-color: #f0f9e9;
			text-align: center;
			line-height: 30px;
			border: 1px solid #bfd6af;
			font-weight: 700;

			&:hover {
				cursor: pointer;
			}
		}

		.info {
			margin-top: 10px;
			border: 2px solid #e6e6e6;
			height: 200px;
			width: 600px;

			>div {
				padding: 10px;
			}

			.title {
				font-size: 14px;
				color: #666;
			}

			.default {
				margin-left: 20px;
				width: 55px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				background-color: #ffaa45;
				color: white;
			}

			table {
				margin-left: 30px;

				tr {
					td {
						padding-bottom: 10px;
					}

					.table-key {
						text-align: right;
						color: #999999;
						width: 70px;
					}

					.table-value {
						padding-left: 10px;
						width: 430px;
					}
				}

				.edit {
					text-align: right;
					color: #005ea7;

					&:hover {
						cursor: pointer;
						color: #e2231e;
					}
				}
			}
		}
	}
</style>